<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,.box,.head,.content,.foot,.bottom,ul {
            margin: 0;
            padding:0;
        }
       
        .box {
            width: 100%;
            /*background-color: pink;*/
            display: flex;
            flex-direction: column;
        }
        .head {
            width: 100%;
            flex: 1;
        }
        .head img {
            width: 100%;
            height: 100%;
        }
        .content {
            width: 100%;
            height: 400px;
            flex: 4;
            display: flex;
            flex-direction: column;
        }
        .one {
            width: 98%;
            background-color: hotpink;
            flex: 1;
            display: flex;
            margin: 0 auto;
            margin-top: 5px;
            border-radius: 10px;
        }
        .one>.left {
            flex: 1;
        }

        .one>.left a,.two>.left a,.three>.left a{
            display: block;
            width: 100%;
            height: 98px;
            text-align: center;
            /*line-height: 98px;*/
            color: #FFFFFF;
            text-decoration: none;
            font-family: 'microsoft yahei', sans-serif;
            padding-top: 10px;
        }

        .one>.left a:after,.two>.left a:after,.three>.left a:after,.four>.left a:after{
            content: "";
            display: block;
            width: 40px;
            height: 33px;
            margin: 0 auto;
            margin-top: 15px;
            background: url("images/xiechengicon.png") no-repeat;
            background-size: 104px 327px;
        }
        .one>.left a:after{
            background-position: 0 -130px;
        }
        .two>.left a:after{
            background-position: -52px -121px;
        }
        .three>.left a:after{

            background-position: 0 -183px;

        }
        .one>.right {
            flex: 2;
        }
        .right li {
            list-style: none;
            border-left: 1px solid #fff;
            border-bottom: 1px solid #fff;
            float: left;
            width: 50%;
            box-sizing: border-box;
            height: 48px;
            text-align: center;
            color: #fff;
            font: normal 14px/45px "microsoft yahei";
        }
        .two {
            width: 98%;
            background-color: green;
            flex: 1;
            display: flex;
            margin: 0 auto;
            margin-top: 5px;
            border-radius: 10px;
        }
        .two>.left {
            flex: 1;
        }
        .two>.right {
            flex: 2;
        }

        .three {
            width: 98%;
            background-color: blue;
            flex: 1;
            display: flex;
            margin: 0 auto;
            margin-top: 5px;
            border-radius: 10px;
        }
        .three>.left {
            flex: 1;
        }
        .three>.right {
            flex: 2;
        }

        .right li.third,.right li.fourth {
            border-bottom: none;
        }
        .four {
            width: 98%;
            background-color: orange;
            flex: 1;
            display: flex;
            margin: 0 auto;
            margin-top: 5px;
            border-radius: 10px;
        }
        .four ul {
            width: 100%;
            height: 100%;
        }
        .four li {
            list-style: none;
            float: left;
            width: 33.33%;
            height: 48px;
            text-align: center;
            font: normal 14px/50px "microsoft yahei";
            color: #fff;
            border-right: 1px solid #fff;
            box-sizing: border-box;
            border-bottom: 1px solid #fff;
        }
        .four li.four_b {
            border-bottom: none;
        }
        .four li.four_r {
            border-right:none;
        }
        .foot {
            flex: 1;
            display: flex;
            justify-content: space-around;
            
        }
        .foot img {
            flex: 1;
            width: 50%;
            height: 100%;
        }
        .bottom {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .bottom li {
            list-style: none;
            float: left;
        }
        .bottom .type {
            flex: 2;
            width: 100%;

        }
        .bottom .type ul {
            width: 100%;
            height: 100%;
            display: flex;
            border-top: 1px solid #CCCCCC;
            border-bottom: 1px solid #CCCCCC;
        }
        .bottom .type li {
            flex: 1;

        }
        .bottom .type li a {
            display: block;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        .bottom  a {
            text-decoration: none;
            color: #000;
            font: normal 12px "microsoft yahei";
        }
        .bottom .info {
            flex: 1;
            width: 100%;
        }
        .bottom .info>ul {
            width: 180px;
            height: 20px;
            margin: 0 auto;
            display: flex;

        }
        .bottom .last {
            width: 46px;
            text-align: center;
            line-height: 20px;
        }
        .bottom .info .info_li{
            display: block;
            height: 20px;
            text-align: center;
            line-height: 20px;
            flex: 1;
        }

        .bottom .info li a {
            margin: 0 3px;
        }
        .bottom .info li span {
            font-size: 12px;
        }
        .bottom p {
            flex: 1;
            width: 100%;
            text-align: center;
            font:normal 14px/20px "microsoft yahei";
        }
    </style>
</head>
<body>
<div class="box">
    <div class="head">
        <img src="images/banner.jpg" alt=""/>
    </div>
    <div class="content">
        <div class="one">
            <div class="left">
                <a href="#">酒店</a></div>
            <div class="right">
                <ul>
                    <li><a href="#"></a>海外酒店</li>
                    <li><a href="#"></a>团购</li>
                    <li class="third"><a href="#"></a>特惠酒店</li>
                    <li class="fourth"><a href="#"></a>客栈公寓</li>
                </ul>
            </div>
        </div>
        <div class="two">
            <div class="left"><a href="#">机票</a></div>
            <div class="right">
                <ul>
                    <li><a href="#"></a>火车票</li>
                    <li><a href="#"></a>汽车票船票</li>
                    <li class="third"><a href="#"></a>国际机票</li>
                    <li class="fourth"><a href="#"></a>自驾专车</li>
                </ul>
            </div>
        </div>
        <div class="three">
            <div class="left"><a href="#">旅游</a></div>
            <div class="right">
                <ul>
                    <li><a href="#"></a>攻略身边</li>
                    <li><a href="#"></a>游轮</li>
                    <li class="third"><a href="#"></a>周末游</li>
                    <li class="fourth"><a href="#"></a>保险签证</li>
                </ul>
            </div>
        </div>
        <div class="four">
            <ul>
                <li><a href="#"></a>门票玩乐</li>
                <li><a href="#"></a>美食</li>
                <li class="four_r"><a href="#"></a>全球购</li>
                <li class="four_b"><a href="#"></a>礼品卡</li>
                <li class="four_b"><a href="#"></a>出境WIFI</li>
                <li class="four_b four_r"><a href="#"></a>更多</li>
            </ul>
        </div>
    </div>
    <div class="foot">
        <img src="images/extra_1.png" alt=""/>
        <img src="images/extra_2.png" alt=""/>
    </div>
    <div class="bottom">
        <div class="type">
            <ul>
                <li><a href="#">电话预定</a></li>
                <li><a href="#">下载客户端</a></li>
                <li><a href="#">我的</a></li>
            </ul>
        </div>
        <div class="info">
            <ul>
                <li class="info_li"><a href="#">网站地图</a><span>|</span></li>
                <li class="info_li"><a href="#">ENGLISH</a><span>|</span></li>
                <li class="last"><a href="#">电脑版</a></li>
            </ul>
            <p>&copy;2015 携程旅行</p>
        </div>
    </div>
</div>
</body>
</html>